<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>主页</title>
	<link
		rel="stylesheet"
		href="https://cdn.jsdelivr.net/npm/mdui@1.0.0/dist/css/mdui.min.css"
		integrity="sha384-2PJ2u4NYg6jCNNpv3i1hK9AoAqODy6CdiC+gYiL2DVx+ku5wzJMFNdE3RoWfBIRP"
		crossorigin="anonymous"
	/>
	<link rel="stylesheet" href="//cdnjs.loli.net/ajax/libs/aplayer/1.10.1/APlayer.min.css"/>
	<script src="//cdnjs.loli.net/ajax/libs/aplayer/1.10.1/APlayer.min.js"></script>
	<script src="//cdnjs.loli.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
	<script src="//cdnjs.loli.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<style type="text/css">
		#data_dis {
			display: inline;
			margin: 5px;
		}
	</style>
</head>
<body class="mdui-theme-accent-blue mdui-appbar-with-toolbar mdui-appbar-with-tab-larger">
	<div id="aplayer"></div>
	<div class="mdui-container" id="app">
		<div class="mdui-appbar mdui-appbar-fixed mdui-appbar-scroll-toolbar-hide">
			<div class="mdui-toolbar mdui-color-indigo">
				<button class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: '主页'}" onclick="location='/index.html'"><i class="mdui-icon material-icons">home</i></button>
				<a href="javascript:;" class="mdui-typo-headline">主页</a>
				<div class="mdui-toolbar-spacer"></div>
				<span class="mdui-typo-title">欢迎你，{{ username }}！</span>
				<button class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-theme-accent" onclick="location='/login.html'" v-show="not_login()">登录</button>
				<button class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-white" onclick="location='/regis.html'" v-show="not_login()">注册</button>
				<button class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-white" onclick="location='/upload.html'" v-show="is_login()">投稿</button>
				<button class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-theme-accent" v-on:click="logout" v-show="is_login()">注销</button>
			</div>
			<div class="mdui-tab mdui-color-indigo mdui-tab-full-width" mdui-tab>
				<a href="#article" class="mdui-ripple">
					<i class="mdui-icon material-icons">description</i>
					<label>文章</label>
				</a>
				<a href="#picture" class="mdui-ripple mdui-tab-active">
					<i class="mdui-icon material-icons">image</i>
					<label>图片</label>
				</a>
				<a href="#video" class="mdui-ripple">
					<i class="mdui-icon material-icons">videocam</i>
					<label>视频</label>
				</a>
			</div>
		</div>
		<div class="mdui-center" style="max-width: 1280px;">
			<div id="article">
				<div class="mdui-tab" mdui-tab>
					<a href="#latest_article" class="mdui-ripple">最新</a>
					<a href="#highest_article" class="mdui-ripple">评分最高</a>
					<a href="#random_article" class="mdui-ripple">随机</a>
				</div>
				<div id="latest_article">
					咕咕咕
				</div>
				<div id="highest_article">
					咕咕咕
				</div>
				<div id="random_article">
					咕咕咕
				</div>
			</div>
			<div id="picture">
				<div class="mdui-tab" mdui-tab>
					<a href="#latest_picture" class="mdui-ripple">最新</a>
					<a href="#highest_picture" class="mdui-ripple">评分最高</a>
					<a href="#random_picture" class="mdui-ripple" v-on:click="refresh_picture">随机 10 张</a>
				</div>
				<div v-bind:style=" { 'column-count': col_count } " id="latest_picture">
					<div style="break-inside: avoid; margin-bottom: 10px;" class="mdui-card" v-for="item in get_info('image', 'uptime', 0)">
						<div class="mdui-card-header">
							<i class="mdui-icon material-icons mdui-card-header-avatar">account_box</i>
							<div class="mdui-card-header-title mdui-typo">
								<a class="mdui-color-white" v-bind:href="'/user.html?id='+item.userid">{{ item.username }}</a>
							</div>
						</div>
						<div class="mdui-card-media">
							<img v-bind:src="item.fpath"/>
						</div>
						<div class="mdui-card-content">{{ item.fdes }}</div>
						<div class="mdui-card-actions">
							<div id="data_dis">
								<i class="mdui-icon material-icons">favorite</i>
								{{ item.likes }}
							</div>
							<div id="data_dis">
								<i class="mdui-icon material-icons">date_range</i>
								{{ item.uptime }}
							</div>
							<button style="margin-top: 10px;" class="mdui-btn mdui-ripple mdui-center" v-bind:onclick="'location=\'/show.html?id='+item.id+'\''">详情</button>
						</div>
					</div>
				</div>
				<div v-bind:style=" { 'column-count': col_count } " id="highest_picture">
					<div style="break-inside: avoid; margin-bottom: 10px;" class="mdui-card" v-for="item in get_info('image', 'likes', 0)">
						<div class="mdui-card-header">
							<i class="mdui-icon material-icons mdui-card-header-avatar">account_box</i>
							<div class="mdui-card-header-title mdui-typo">
								<a class="mdui-color-white" v-bind:href="'/user.html?id='+item.userid">{{ item.username }}</a>
							</div>
						</div>
						<div class="mdui-card-media">
							<img v-bind:src="item.fpath"/>
						</div>
						<div class="mdui-card-content">{{ item.fdes }}</div>
						<div class="mdui-card-actions">
							<div id="data_dis">
								<i class="mdui-icon material-icons">favorite</i>
								{{ item.likes }}
							</div>
							<div id="data_dis">
								<i class="mdui-icon material-icons">date_range</i>
								{{ item.uptime }}
							</div>
							<button style="margin-top: 10px;" class="mdui-btn mdui-ripple mdui-center" v-bind:onclick="'location=\'/show.html?id='+item.id+'\''">详情</button>
						</div>
					</div>
				</div>
				<div v-bind:style=" { 'column-count': col_count } " id="random_picture">
					<div style="break-inside: avoid; margin-bottom: 10px;" class="mdui-card" v-for="item in random_picture">
						<div class="mdui-card-header">
							<i class="mdui-icon material-icons mdui-card-header-avatar">account_box</i>
							<div class="mdui-card-header-title mdui-typo">
								<a class="mdui-color-white" v-bind:href="'/user.html?id='+item.userid">{{ item.username }}</a>
							</div>
						</div>
						<div class="mdui-card-media">
							<img v-bind:src="item.fpath"/>
						</div>
						<div class="mdui-card-content">{{ item.fdes }}</div>
						<div class="mdui-card-actions">
							<div id="data_dis">
								<i class="mdui-icon material-icons">favorite</i>
								{{ item.likes }}
							</div>
							<div id="data_dis">
								<i class="mdui-icon material-icons">date_range</i>
								{{ item.uptime }}
							</div>
							<button style="margin-top: 10px;" class="mdui-btn mdui-ripple mdui-center" v-bind:onclick="'location=\'/show.html?id='+item.id+'\''">详情</button>
						</div>
					</div>
				</div>
			</div>
			<div id="video">
				<div class="mdui-tab" mdui-tab>
					<a href="#latest_video" class="mdui-ripple">最新</a>
					<a href="#highest_video" class="mdui-ripple">评分最高</a>
					<a href="#random_video" class="mdui-ripple">随机</a>
				</div>
				<div id="latest_video">
					咕咕咕
				</div>
				<div id="highest_video">
					咕咕咕
				</div>
				<div id="random_video">
					咕咕咕
				</div>
			</div>
		</div>
	</div>
	<script
		src="//cdn.jsdelivr.net/npm/mdui@1.0.0/dist/js/mdui.min.js"
		integrity="sha384-aB8rnkAu/GBsQ1q6dwTySnlrrbhqDwrDnpVHR2Wgm8pWLbwUnzDcIROX3VvCbaK+"
		crossorigin="anonymous"
	></script>
	<script src="/index.js"></script>
</body>
</html>